<!DOCTYPE html>
<html>

<head>

    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <script src="../perspective-viewer.js"></script>
    <script src="../perspective-viewer-datagrid.js"></script>
    <script src="../perspective-viewer-d3fc.js"></script>

    <script src="../perspective.js"></script>

    <link rel='stylesheet' href="../material.css" is="custom-style">

    <style>
        .example-chart {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>

<body>

    <div id="container">

        <perspective-viewer class="example-chart" plugin="d3_ohlc" row-pivots='["Date"]' column-pivots='[]' filters='[]'
            sort='[]' columns='["Open","Price","High","Low"]'
            aggregates='{"Date":"distinct count","Change%":"sum","High":"sum","Low":"sum","Open":"sum","Price":"sum","Vol.":"sum"}'>

        </perspective-viewer>

    </div>

    <script>
        window.addEventListener("WebComponentsReady", function () {
            var url = './FTSE100.csv';
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.onload = function () {
                var table = perspective.worker().table(xhr.response);
                var elem = document.getElementsByTagName("perspective-viewer")[0];
                elem.load(table);
            }

            xhr.send(null);
        });
    </script>
</body>

</html>